import { PageContainer, ProTable } from "@ant-design/pro-components";
import { FormattedMessage, useIntl } from '@umijs/max';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';
import { Button, Drawer, Input, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { addRule, removeRule, rule, updateRule } from '@/services/ant-design-pro/api';

const RoleList: React.FC = () => {
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();

  const actionRef = useRef<ActionType>();

  /**
   * @en-US Pop-up window of new window
   * @zh-CN 新建窗口的弹窗
   *  */
  const [createModalOpen, handleModalOpen] = useState<boolean>(false);

  return (
		<PageContainer>
			<ProTable<API.RuleListItem>
			  headerTitle={intl.formatMessage({
          id: 'pages.searchTable.title',
          defaultMessage: 'Enquiry form',
        })}
        actionRef={actionRef}
        rowKey="id"
        search={false}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalOpen(true);
            }}
          >
            <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
          </Button>,
        ]}
        request={rule}
			/>
		</PageContainer>
  );
};

export default RoleList;